<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水库管理系统 - 新建水库</title>

    <link rel="stylesheet" href="CSS/apple-style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
    <div class="header">
        <h2>水库管理系统</h2>
        <div class="user-info">
            <span id="welcome-message">欢迎回来，用户</span>
            <a href="LogoutServlet" class="btn">登出系统</a>
        </div>
    </div>

    <div class="content">
        <div class="actions">
            <a href="damList.html" class="btn secondary">返回列表</a>
        </div>
        
        <div class="form-container">
            <h3>新建水库</h3>
            <form id="add-dam-form">
                <div class="form-group">
                    <label for="name">水库名称</label>
                    <input type="text" id="name" name="name" required placeholder="请输入水库名称">
                </div>
                <div class="form-group">
                    <label for="river">所属河流</label>
                    <input type="text" id="river" name="river" placeholder="请输入所属河流">
                </div>
                <div class="form-group">
                    <label for="capacity">库容量</label>
                    <input type="number" id="capacity" name="capacity" step="0.01" required placeholder="请输入库容（亿立方米）">
                </div>
                <div class="form-group">
                    <label for="completeDate">建成时间</label>
                    <input type="date" id="completeDate" name="completeDate" required>
                </div>
                <div class="form-actions">
                    <button type="button" id="cancel-btn" class="btn secondary">取消</button>
                    <button type="submit" class="btn">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // // 获取用户信息
        // $.ajax({
        //     url: 'GetUserServlet',
        //     type: 'GET',
        //     success: function(response) {
        //         var result = JSON.parse(response);
        //         if (result.success) {
        //             console.log('新增成功！')
        //             alert('新增成功！');
        //             window.location.href = 'damList.html';
        //         } else {
        //             alert('新增失败！');
        //         }
        //     },
        // });
        
        // 取消按钮点击事件
        $('#cancel-btn').click(function() {
            window.location.href = 'damList.html';
        });
        // let add = document.querySelector("#add-dam-form")
        // 表单提交事件
        $('#add-dam-form').submit(function(e) {
            e.preventDefault();

            var name = $('#name').val();
            var river = $('#river').val();
            var capacity = $('#capacity').val();
            var completeDate = $('#completeDate').val();

            $.ajax({
                url: 'AddDamServlet',
                type: 'POST',
                data: {
                    name: name,
                    river: river,
                    capacity: capacity,
                    completeDate: completeDate
                },
                success: function(response) {
                    // console.log(response)
                    var result = response
                    console.log(result)
                    if (result.success) {
                        console.log('新增成功！')
                        alert('新增成功！');
                        window.location.href = 'damList.html';
                    } else {
                        alert('新增失败！');
                    }
                },
                error: function() {
                    alert('新增失败！');
                }
            });
        });
    });
</script>
</body>
</html>